<template>
	<view class="">
		<map class="map" :longitude="point.longitude" :latitude="point.latitude" :markers="markers"></map>
		<view class="search-con"><u-search v-model="keyword" placeholder="输入地址搜索" @search="search" :showAction="false"></u-search></view>

		<view class="bottom-left flex-col items-center">
			<view class="bottom-left-icon" @click="getPoint"><image src="/static/img/dingwei.png" mode="" class="bottom-left-icon"></image></view>
		</view>
		<view class="bottom flex-row justify-between">
			<view class="btn" @tap="navTo(`./list?longitude=${point.longitude}&latitude=${point.latitude}`)">附近救援队</view>
			<view class="btn" @tap="onClick">一键救援</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword:'',
			point: uni.getStorageSync('point'),
			isReady: false,
			current: {
				address: ''
			},
			markers: []
		};
	},
	onLoad() {
		this.getPoint();
	},
	watch: {
		point: {
			handler(newval) {
				this.markers[0] = {
					id: 0,
					latitude: newval.latitude,
					longitude: newval.longitude,
					iconPath: '',
					width:20,
					height: 20,
					title: '当前位置'
				};
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		onClick() {
			getApp().globalData.serverInfo = this.current;
			this.navTo('/pages_servce/servce/creat');
		},
		search() {
			this.navTo(`/pages_servce/servce/searchList?keyword=${this.keyword}`)
		},
		async getPoint() {
			let _this = this;
			if (_this.isReady) {
				_this.$util.msg('请稍后重新定位!');
				return;
			}
			_this.isReady = true;
			uni.showLoading({
				title: '定位中....'
			});
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					_this.point.longitude = res.longitude;
					_this.point.latitude = res.latitude;
					uni.request({
						url:'https://restapi.amap.com/v3/geocode/regeo?parameters',
						method:"GET",
						data:{
							key:_this.mapKey,
							location: res.longitude * 1 + ',' + res.latitude * 1,
						},
						success(options) {
							console.log(options);
							if(options.data.status == '1'){
								_this.current.address = options.data.regeocode.formatted_address;
							}
						}
					})
				},
				fail(err) {
					console.log(err);
					_this.$util.msg('你拒绝定位，不能获取准确信息!');
					_this.point.longitude = '116.40';
					_this.point.latitude = '39.90';
					_this.current.address = '北京市';
				},
				complete() {
					uni.hideLoading();
				}
			});
			setTimeout(() => {
				_this.isReady = false;
			}, 10000);
		}
	}
};
</script>

<style scoped lang="scss">
.search-con {
	position: fixed;
	top: 50rpx;
	left: 10%;
	width: 80%;
}
.map {
	height: 100vh;
	width: 100vw;
}
.icon {
	width: 58rpx;
	height: 58rpx;
}
.bottom-icon {
	width: 28rpx;
	height: 32rpx;
	margin-right: 10rpx;
}
.bottom-left {
	position: fixed;
	bottom: 120rpx;
	right: 20rpx;
	width: 100rpx;
	z-index: 9;
}
.bottom-left-icon {
	width: 72rpx;
	height: 72rpx;
	margin-bottom: 20rpx;
}
.bottom {
	position: fixed;
	bottom: 50rpx;
	left: 0;
	width: 100%;
	padding: 0 100rpx;
}
.btn {
	height: 88rpx;
	line-height: 88rpx;
	font-size: 34rpx;
	color: #ffffff;
	width: 250rpx;
	text-align: center;
	background: $uni-color-bg;
	border-radius: 44rpx;
}
</style>
